import React, {Component} from 'react';
import {View, TouchableOpacity, Text} from 'react-native';
import Header from "../../../../components/header";
import {ListItem} from "react-native-elements";
import {inject,observer} from "mobx-react";
import {pxToDp} from "../../../../utils/styleKits";
import {ActionSheet} from 'teaset';
import {removeInfo} from "../../../../utils/AsyncStorage";
import JMessage from "../../../../utils/JMessage";
import {Toast} from 'teaset';

@inject('RootStore','UserInfoStore')
@observer
class Index extends Component {
  render() {
    let {mobile} = this.props.RootStore;
    return (
      <View>
        <Header title={'通用设置'} leftTitle={''}/>

        <ListItem bottomDivider>
          <ListItem.Content>
            <ListItem.Title>设置陌生人问题</ListItem.Title>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <ListItem bottomDivider>
          <ListItem.Content>
            <ListItem.Title>通知设置</ListItem.Title>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <ListItem bottomDivider>
          <ListItem.Content>
            <ListItem.Title>黑名单</ListItem.Title>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <ListItem bottomDivider>
          <ListItem.Content>
            <ListItem.Title>修改手机号</ListItem.Title>
          </ListItem.Content>
          <ListItem.Content style={{alignItems:'flex-end'}}>
            <ListItem.Title>{mobile}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <TouchableOpacity onPress={this.logout} style={{margin:pxToDp(40),backgroundColor:'#fff',justifyContent:'center',
          alignItems:'center',padding:pxToDp(10),borderRadius:pxToDp(50)}}>
          <Text>退出登录</Text>
        </TouchableOpacity>
      </View>

    );
  }

  // 退出登录
  logout = () => {
    let items = [
      {title: '确定退出', onPress: this.isLogout},
    ];
    let cancelItem = {title: '取消退出'};
    ActionSheet.show(items, cancelItem);
  };

  isLogout = async () => {
    // 清除本地的数据
    await removeInfo();

    //清除缓存中用户的数据
    this.props.UserInfoStore.clearUserInfo();
    //清除缓存中token的数据
    this.props.RootStore.clearInfo();
    // 极光退出
    JMessage.logout();

    Toast.smile('退出成功');

    setTimeout(()=>{
      this.props.navigation.navigate('login')
    },2000)
  }
}

export default Index;